<template>
  <span>
    <div style="text-align: center">
      <img class="FavImg" :src="imgUrl" alt="" />
    </div>
  </span>
</template>

<script>
export default {
  name: "mainImg",
  props: ["imgUrl"],
};
</script>

<style>
.FavImg {
  width: 85% !important;
  border-radius: 1.2em !important;
  display: inline-block;
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12),
              0 2px 10px 0 rgba(34, 36, 38, 0.08);
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
}

.FavImg:hover {
  box-shadow: 0 0 25px  var(--shadowColor), 
              0 0 25px  var(--shadowColor),
              0 0 25px  var(--shadowColor), 
              0 0 25px  var(--shadowColor);
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
}

</style>